<script setup lang="ts" name="orderPayResult">
import { onMounted, reactive } from 'vue';
import { getUrlParam } from '@/utils';
import api from '@/api';
import { showDialog } from 'vant';
import defaultUser from '@/assets/images/default-user.png';

const state = reactive({
    actuallyAmount: '',
    buyerInfo: null,
    orderStatus: '',
    orderId: '',
    payTime: '',
    payType: '',
    sellerInfo: null,
    staffInfo: null,
    miniCodeUrl: '',
    showLoading: true,
    bankTradeNo: '',
    mchTradeNo: ''
});

onMounted(() => {
    // 初始化点金计划
    initGoldPlan();
    getPayResult();
});

const initGoldPlan = () => {
    let mchData = { action: 'onIframeReady', displayStyle: 'SHOW_CUSTOM_PAGE' };
    let postData = JSON.stringify(mchData);
    parent.postMessage(postData, 'https://payapp.weixin.qq.com');
};

//
const getPayResult = async () => {
    //?sub_mch_id=1234567&out_trade_no=ABCDEFG&check_code=39f0876dd58e4eb61b66250f69d02705
    const subMchId = getUrlParam('sub_mch_id');
    const outTradeNo = getUrlParam('out_trade_no');
    const checkCode = getUrlParam('check_code');

    if (!subMchId || !outTradeNo || !checkCode) {
        showDialog({ title: '地址错误，缺少参数' });
        return false;
    }

    try {
        const data: any = await api.fetchGet('getPaySuccessOrderInfo4DJ', {
            subMchId,
            outTradeNo,
            checkCode,
            envVersion: import.meta.env.VITE_DEBUG ? 'trial' : 'release'
        });
        if (data) {
            if (data.actuallyAmount) {
                state.actuallyAmount = Number(data.actuallyAmount).toFixed(2);
            }
            state.buyerInfo = data.buyerInfo;
            state.orderId = data.orderId;
            state.payTime = data.payTime;
            state.sellerInfo = data.sellerInfo;
            state.staffInfo = data.staffInfo;
            state.bankTradeNo = data.bankTradeNo;
            state.mchTradeNo = data.mchTradeNo;
            state.showLoading = false;
            // 获取小程序吗
            getMiniCode(data.scene);
        }
    } catch (err) {
        console.log(err);
    }
};

const getMiniCode = async (scene: string) => {
    const subMchId = getUrlParam('sub_mch_id');
    const outTradeNo = getUrlParam('out_trade_no');
    const checkCode = getUrlParam('check_code');
    try {
        const data: any = await api.fetchPost(
            'generateMiniCode4DJ',
            {
                page: 'pages/check-auth/check-auth',
                scene,
                subMchId,
                outTradeNo,
                checkCode,
                envVersion: import.meta.env.VITE_DEBUG ? 'trial' : 'release',
                width: 76
            },
            { isLoading: false }
        );
        if (data) {
            state.miniCodeUrl = data.fileUrl ? `${data.fileUrl}?imageMogr2/thumbnail/264x264` : '';
        }
    } catch (err) {
        console.log(err);
    }
};
</script>

<template>
    <c-page :loading="state.showLoading">
        <div class="pay-result">
            <div class="header">
                <div class="title-box">
                    <c-icon name="checkbox4" size="20" />
                    <div class="title">支付成功</div>
                </div>
                <div class="money">
                    <div v-if="state.actuallyAmount" class="unit">¥</div>
                    <div>{{ state.actuallyAmount }}</div>
                </div>
            </div>
            <div class="detail">
                <view class="list-cell">
                    <div class="label">付款客户</div>
                    <view class="value">
                        <img
                            class="user-avatar"
                            :src="state.buyerInfo && state.buyerInfo.buyerHeader ? state.buyerInfo.buyerHeader + '?imageMogr2/thumbnail/32x32' : defaultUser" 
                        />
                        <div class="user-name">{{state.buyerInfo && state.buyerInfo.buyerName}}</div>
                    </view>
                    </view>
                <div class="list-cell">
                    <div class="label">付款时间</div>
                    <div class="value">{{ state.payTime }}</div>
                </div>
                <div class="list-cell">
                    <div class="label">订单编号</div>
                    <div class="value">{{ state.orderId }}</div>
                </div>
                <!-- <div v-if="state.bankTradeNo" class="list-cell">
                    <div class="label">交易单号</div>
                    <div class="value">{{ state.bankTradeNo }}</div>
                </div> -->
                <div v-if="state.mchTradeNo" class="list-cell">
                    <div class="label">商户单号</div>
                    <div class="value">{{ state.mchTradeNo }}</div>
                </div>
            </div>
            <div class="footer">
                <div class="seller-info">
                    <c-icon name="comma" size="16" color="#F6F6F6"></c-icon>
                    <div class="poster-info">
                        <img
                            class="poster"
                            :src="state.sellerInfo && state.sellerInfo.sellerHeader ? state.sellerInfo.sellerHeader + '?imageMogr2/thumbnail/72x72' : defaultUser" 
                        />
                        <div class="name-box">
                            <div class="seller-name">{{
                                state.sellerInfo && state.sellerInfo.sellerName
                            }}</div>
                            <div
                                v-if="state.staffInfo && state.staffInfo.roleType !== 'ADMIN'"
                                class="staff-name"
                            >
                                收款员工：{{ state.staffInfo.staffName }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="code-box">
                    <img
                        v-if="state.miniCodeUrl"
                        class="code"
                        :src="state.miniCodeUrl"
                    />
                    <div v-else class="code-default">
                        <div class="loading-animation"></div>
                    </div>
                    <div class="info">扫码查看订单</div>
                </div>
            </div>
        </div>
    </c-page>
</template>

<style lang="less" scoped>
@import './index.less';
</style>
